<template>
  <div class="console-container">
    <!-- 主卡片区域 -->
    <el-card class="console-card">
      <!-- 卡片标题区 -->
      <template #header>
        <div class="card-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" width="24" height="24">
              <path fill="currentColor"
                    d="M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3M15 5V19H19V5H15M5 5V9H13V5H5M5 11V13H7V11H5M8 11V13H10V11H8M11 11V13H13V11H11M5 14V16H7V14H5M8 14V16H10V14H8M11 14V16H13V14H11M5 17V19H7V17H5M8 17V19H10V17H8M11 17V19H13V17H11Z"/>
            </svg>
          </div>
          <h3>服务器日志管理</h3>
          <div class="last-update">最后更新: {{ formatTimestamp(ServerLog.currentTime) }}</div>
        </div>
      </template>

      <!-- 卡片内容区 -->
      <div class="card-content">
        <!-- 统计信息区 -->
        <div class="stats-container">
          <div class="stat-item">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#409EFF" d="M3 3H21V21H3V3M4 4V20H20V4H4M11 7H13V17H11V7Z"/>
              </svg>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ ServerLog.logSize }}</div>
              <div class="stat-label">日志数量</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#FFCC00" d="M12,2L2,7L12,22L22,7Z"/>
                <path fill="#FFFFFF" d="M11,15H13V17H11V15M11,7H13V13H11V7"/>
              </svg>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ ServerLog.warnSize }}</div>
              <div class="stat-label">警告数量</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-icon">
              <svg viewBox="0 0 24 24" width="20" height="20">
                <path fill="#F56C6C"
                      d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/>
              </svg>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ ServerLog.errorSize }}</div>
              <div class="stat-label">错误数量</div>
            </div>
          </div>
        </div>

        <!-- 文件信息展示 -->
        <div class="file-info">
          <div class="info-icon">
            <svg viewBox="0 0 24 24" width="20" height="20">
              <path fill="currentColor"
                    d="M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z"/>
            </svg>
          </div>
          <div class="info-text">
            <span class="info-label">日志文件大小:</span>
            <span class="info-value">{{ ServerLog.logFileSize }} MB</span>
          </div>
        </div>

        <!-- 日志预览区 -->
        <div class="log-preview">
          <div class="section-header">
            <div style="display: flex; align-items: center; gap: 8px;">
              <h4>最新日志预览</h4>
              <el-tooltip
                  content="仅显示最近500条日志，完整日志请下载文件查看"
                  placement="top"
              >
                <el-icon style="color: #909399"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            <el-button
                size="small"
                type="text"
                @click="refreshLogs"
            >
              刷新
            </el-button>
          </div>
          <div class="log-content">
            <div
                v-for="(log, index) in ServerLog.logData"
                :key="index"
                class="log-entry"
                :class="log.type"
            >
              <span class="log-message">{{ log }}</span>
            </div>
            <div v-if="ServerLog.logData.length === 0" class="empty-logs">
              暂无日志记录
            </div>
          </div>
        </div>

        <!-- 操作按钮组 -->
        <div class="action-buttons">
          <el-button
              type="danger"
              @click="clearDebug()"
              class="action-btn"
              :icon="Delete"
              plain
          >
            清空日志
          </el-button>
          <el-button
              type="success"
              @click="consoleDebug()"
              class="action-btn"
              :icon="Download"
              plain
          >
            下载日志
          </el-button>
        </div>

        <!-- 操作历史 -->
        <!--        <div class="operation-history">
                  <div class="section-header">
                    <h4>操作历史</h4>
                  </div>
                  <el-timeline>
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :timestamp="activity.time"
                    >
                      {{ activity.action }}
                    </el-timeline-item>
                  </el-timeline>
                </div>-->
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {Delete, Download} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {deleteLog, downloadLog, getServerLog} from "@/api/tool/serverLog/index.js";
import setting from "@/setting.js";
import {formatTimestamp} from "@/utils/time.js";

let ServerLog = reactive({
  logSize: "",
  warnSize: "",
  errorSize: "",
  logFileSize: "",
  currentTime: "",
  logData: []
})

//mock数据
const recentLogs = ref([
  {time: "10:23:45", message: "系统启动完成", type: "info"},
  {time: "10:24:12", message: "用户admin登录成功", type: "info"},
  {time: "10:25:03", message: "数据库连接异常", type: "error"},
  {time: "10:26:47", message: "缓存更新完成", type: "success"},
  {time: "10:27:22", message: "执行定时任务: 数据备份", type: "warning"},
  {time: "10:23:45", message: "系统启动完成", type: "info"},
  {time: "10:24:12", message: "用户admin登录成功", type: "info"},
  {time: "10:25:03", message: "数据库连接异常", type: "error"},
  {time: "10:25:03", message: "数据库连接异常", type: "error"},
  {time: "10:25:03", message: "数据库连接异常", type: "error"},
])

const consoleDebug = async () => {
  await downloadLog().then(response => {
    // 创建一个blob对象
    const blob = new Blob([response.data], {type: response.headers['Content-Type']});
    // 创建一个a标签
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    // 设置下载文件的文件名
    link.download = decodeURIComponent(response.headers['content-disposition'].split('filename=')[1].replace(/"/g, ''));
    // 触发点击事件下载文件
    link.click();
    ElMessage({type: 'success', message: '下载成功'});
  }).catch((reason) => {
    console.log(reason)
    ElMessage({type: 'error', message: '下载失败'});
  })
}

const clearDebug = () => {
  deleteLog().then(res => {
    if (res.code === setting.SYSTEM_SUCCESS) {
      ElMessage({type: 'success', message: '删除成功'});
      refreshLogs()
    }
  })
}


const refreshLogs = () => {
  getServerLog().then(res => {
    if (res.code === setting.SYSTEM_SUCCESS) {
      Object.assign(ServerLog, res.data);
    }
  })
}

onMounted(() => {
  refreshLogs()
})
</script>

<style scoped>
.console-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.console-card {
  width: 100%;

  border-radius: 12px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.console-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.console-card >>> .el-card__header {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.console-card >>> .el-card__body {
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #303133;
  flex-grow: 1;
}

.card-header .header-icon {
  color: #409eff;
  display: flex;
  align-items: center;
}

.card-header .last-update {
  font-size: 12px;
  color: #909399;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 10px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #409eff;
}

.stat-item:nth-child(2) {
  border-left-color: #ffcc02;
}

.stat-item:nth-child(3) {
  border-left-color: #f56c6c;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(64, 158, 255, 0.1);
  border-radius: 50%;
}

.stat-item:nth-child(2) .stat-icon {
  background-color: rgba(103, 194, 58, 0.1);
}

.stat-item:nth-child(3) .stat-icon {
  background-color: rgba(230, 162, 60, 0.1);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: #f8fafc;
  border-radius: 8px;
  border-left: 4px solid #67c23a;
}

.file-info .info-icon {
  color: #67c23a;
  display: flex;
  align-items: center;
}

.file-info .info-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.file-info .info-text .info-label {
  font-size: 14px;
  color: #909399;
}

.file-info .info-text .info-value {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.log-preview {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
}

.log-content {
  max-height: 300px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background-color: #f8fafc;
  padding: 10px;
  border-radius: 4px;
}

.log-entry {
  padding: 3px 0;
  line-height: 1.5;
}

.log-time {
  color: #909399;
  margin-right: 10px;
}

.log-message {
  color: #000000;
}

.log-entry.error .log-message {
  color: #f56c6c;
}

.log-entry.success .log-message {
  color: #67c23a;
}

.log-entry.warning .log-message {
  color: #e6a23c;
}

.empty-logs {
  color: #909399;
  text-align: center;
  padding: 20px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.action-buttons .action-btn {
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.action-buttons .action-btn:hover {
  transform: translateY(-2px);
}

.operation-history {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
}

.operation-history >>> .el-timeline {
  padding-left: 10px;
}

.operation-history >>> .el-timeline-item__timestamp {
  color: #909399;
  font-size: 12px;
}

@media (max-width: 768px) {
  .console-container {
    padding: 12px;
  }

  .stats-container {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
    gap: 12px;
  }
}
</style>